<template>
  <div class="recommended-clubs">
    <h3>推荐社团</h3>
    <div class="club-list">
      <div v-for="club in clubs" :key="club.id" class="club-card">
        <img :src="club.image" :alt="club.name" class="club-image">
        <h4 class="club-name">{{ club.name }}</h4>
        <p class="club-description">{{ truncate(club.description, 20) }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
// 模拟社团数据
const clubs = [
  {
    id: 1,
    name: '编程俱乐部',
    image: 'https://tw.xxu.edu.cn/__local/1/02/47/98D6F59F8FFE9146ECB40980D73_24CC37D7_1152C.jpg',
    description: '致力于推广编程文化，举办各种编程竞赛和技术分享活动。'
  },
  {
    id: 2,
    name: '音乐社团',
    image: 'https://www.ahua.edu.cn/_upload/article/images/96/00/cb6df337479fa799547058f96c90/d33fa1e0-1c02-4d89-a3bd-d58f2553159b.jpg',
    description: '汇聚热爱音乐的同学，一起演奏、创作和举办音乐会。'
  },
  {
    id: 3,
    name: '篮球协会',
    image: 'https://news.xidian.edu.cn/_mediafile/xww/2016/09/29/22haqlfova.jpg',
    description: '组织篮球比赛，提供训练机会，促进同学们的体育锻炼。'
  },
  {
    id: 4,
    name: '书法社',
    image: 'https://www.fafu.edu.cn/_upload/article/images/4f/6f/b2c7b3034ddaa6b114dba6dccb03/831eefbc-fe2f-4271-913e-f8f55d0f360f_d.jpg',
    description: '传承中华书法艺术，定期开展书法培训和作品展览。'
  },
  {
    id: 5,
    name: '环保协会',
    image: 'https://www.nynu.edu.cn/__local/F/15/58/39095D3B8E74FEDEDB607FE2A6B_BB0A0334_70F31.jpg',
    description: '关注环境保护，组织各类环保志愿活动和宣传工作。'
  }
]

// 截断字符串函数
const truncate = (str, maxLength) => {
  if (!str) return '';
  if (str.length <= maxLength) return str;
  return str.substring(0, maxLength) + '...';
}
</script>
<style scoped>
.recommended-clubs {
  border-radius: 8px;
  width: 60%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color:rgb(236, 245, 255);
}

.club-list {
  display: flex;
  flex-direction: row;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.club-card {
  width: 250px;
  background-color: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s ease;
}

.club-card:hover {
  transform: translateY(-5px);
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.club-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.club-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.club-description {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin: 0;
}
</style>